@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    /*启用盒子模型，这样不会出现挤压的效果*/
    box-sizing:border-box;
    /*边框模型，容易区分*/
    /*border: 1px solid;*/
}
html,body,.main{
    height:100%;
    background-color: rgb(11, 18, 46);
}
.main {
    display: flex;
    /*按照列排布*/
    flex-direction: column;
}
.border-style{
    background: linear-gradient(to left,#3897cf,#3897cf) left top no-repeat,
                linear-gradient(to bottom,#3897cf,#3897cf) left top no-repeat,
                linear-gradient(to left,#3897cf,#3897cf) right top no-repeat,
                linear-gradient(to bottom,#3897cf,#3897cf) right top no-repeat,
                linear-gradient(to left,#3897cf,#3897cf) left bottom no-repeat,
                linear-gradient(to bottom,#3897cf,#3897cf) left bottom no-repeat,
                linear-gradient(to left,#3897cf,#3897cf) right bottom no-repeat,
                linear-gradient(to left,#3897cf,#3897cf) right bottom no-repeat;;
    background-size: 1px 20px,20px 1px,1px 20px,20px 1px;
    background-color: rgba(0,0,0,.3);
    border: 2px solid #2b3a6a;
}

.top {
    height: 40%;
    margin-bottom: 20px;
    /**/
}

.middle {
    flex: 1;
    display: flex;
}

.middle .left {width: 200px;}
.middle .right {width: 200px;}

.middle .center {
    flex: 1;
    overflow: auto;
    display: flex;
    /*按照列排布*/
    flex-direction: column;
}

.middle .center .center-top {
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.middle .center .center-bottom {
    flex: 1;
}

.middle .center .center-top .item{
    flex: 1;
    display: flex;
}

.middle .center .center-top .item section{
    flex: 1;
    margin: 10px;
}